<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>广告管理</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <link rel="stylesheet" href="/plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="/plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="/css/style.css">
    <script src="/plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="/plugins/bootstrap/js/bootstrap.min.js"></script>

    <!--引入bootstrap-fileinput-->
    <link rel="stylesheet" type="text/css" href="/js/bootstrap-fileinput/css/fileinput.css"/>
    <script type="text/javascript" src="/js/bootstrap-fileinput/js/fileinput.js"></script>
    <script type="text/javascript" src="/js/bootstrap-fileinput/js/locales/zh.js"></script>

</head>

<script type="text/javascript">


    $(function(){
        getContent();
    })
    $(function() {
        $('#myFile').fileinput({
            language: 'zh',
            uploadUrl: '/content/upload',
            browseClass: 'btn btn-primary',
            allowedFileExtensions: ["jpg", "png", "gif"],
            maxFileSize: 10240,
            maxFileCount: 5,
            enctype: "multipart/form-data"
        })
    }).on('fileuploaded',function(event,data,previewId,index){
        if(data.response != null ){
            $("#rimage").val(data.response.data);
        }
    })

    function getContent() {
        $.ajax({
            url: "/content/show",
            type: "post",
            dataType: "json",
            async: true,
            success: function (result) {
                var list = result.data
                console.log(list)
                var str = ''
                for (var i = 0; i < list.length; i++) {
                    str += '<tr>'
                    str += '<td><input type="checkbox" name="check" value="' + list[i].id + '"></td>'
                    str += '<td>' + list[i].id + '</td>'
                    str += '<td>' + list[i].categoryId + '</td>'
                    str += '<td>' + list[i].title + '</td>'
                    str += '<td>' + list[i].url + '</td>'
                    str += '<td><img alt="" src="'+list[i].pic+'" width="100px" height="50px"></td>'
                    str += '<td>' + list[i].sortOrder + '</td>'
                    if(list[i].status == 1){
                        str += '<td>有效</td>'
                    }else{
                        str += '<td>无效</td>'
                    }
                    str += '<td class="text-center">'
                    str += '<button type="button" onclick="conToupdate(' + list[i].id + ')" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModal">修改</button>'
                    str += '</td></tr>'
                }
                $("#tbody").html(str)

            },
            error: function (result) {
                alert("系统错误,请稍后再试");
            }
        })
    }
function insertCon() {
    $.ajax({
        url: "/content/insert",
        type: "post",
        data:$("#addfrom").serialize(),
        dataType: "json",
        async: true,
        success: function (result) {
            if (result.code == 10000) {
                alert("增加成功");
            }else{
                alert("增加失败")
            }
        },
        error: function (result) {
            alert("系统错误,请稍后再试");
        }
    })
}

    function update(){
        $.ajax({
            url: "/content/update",
            type: "post",
            data:$("#contentId").serialize(),
            dataType: "json",
            async: true,
            success: function (result) {
                if (result.code == 10000) {
                    alert("修改成功");
                }else{
                    alert("修改失败")
                }
            },
            error: function (result) {
                alert("系统错误,请稍后再试");
            }
        })
    }

function conToupdate(id) {
    $.ajax({
        url: "/content/toupdate?id="+id,
        type: "post",
        dataType: "json",
        async: true,
        success: function (result) {
          if(result.code==10000){
              var list = result.data.content;
              var cate = result.data.categories;
              var table = '';
              table += '<input type="hidden" name="id" value="'+list.id+'">';
              table += '<tr>';
              table += '<td>广告分类</td>';
              table += '<td>';
              table += '<select className="form-control" id="jj" name="categoryId" >';
              for (var i = 0; i < cate.length; i++) {
                  table += '<option value='+cate[i].id+'>' +cate[i].name+ '</option>';
              }
              table += '</select>';
              table += '</td>';
              table += '</tr>';
              table += '<tr>';
              table += '<td>标题</td>';
              table += '<td><input className="form-control" placeholder="标题" value="'+list.title+'" name="title" ></td>';
              table += '</tr>';
              table += '<tr>';
              table += '<td>URL</td>';
              table += '<td><input className="form-control" value="'+list.url+'" placeholder="URL" name="url" ></td>';
              table += '</tr>';
              table += '<tr>';
              table += '<td>排序</td>';
              table += '<td><input className="form-control" placeholder="排序" name="sortOrder" value="'+list.sortOrder+'"></td>';
              table += '</tr>';
              table += '<tr>';
              table += '<td>广告图片</td>';
              table += '<td>';
              table += '<table>';
              table += '<tr>';
              table += '<td>';
              table += '<input type="file" id="fileId" name="myFile"/>';
              table += '<input type="hidden" id="image" name="pic" value="'+list.pic+'">';
              table += '<img src="' +list.pic+ '" width="100px" height="50px">';
              table += '</td>';
              table += '</tr>';
              table += '</table>';
              table += '</td>';
              table += '</tr>';
              table += '<tr>';
              table += '<td>是否有效</td>';
              table += '<td>';
              table += '<input type="radio" name="status" className="icheckbox_square-blue" value="0" th:if="list.status==0" checked>无效';
              table += '<input type="radio" name="status" className="icheckbox_square-blue" value="1" th:if="list.status==1" checked>有效';
              table += '</td>';
              table += '</tr>';
              $("#updatetable").html(table);

              $("#jj").val(list.categoryId);

              $('#fileId').fileinput({
                  language: 'zh',
                  uploadUrl: '/content/upload',
                  browseClass: 'btn btn-primary',
                  allowedFileExtensions: ["jpg", "png", "gif"],
                  maxFileSize: 10240,
                  maxFileCount: 5,
                  enctype: "multipart/form-data"
              }).on('fileuploaded',function(event,data,previewId,index){
                  if(data.response != null ){
                      $("#image").val(data.response.data);
                  }
              })
          }

        },
        error: function (result) {
            alert("系统错误,请稍后再试");
        }
    })
}
function deleteGoods() {
    var arr = document.getElementsByName("check")
    var ids = []
    for (var i = 0; i < arr.length; i++) {
        if (arr[i].checked) {
            ids.push(arr[i].value)
        }
        console.log(ids)
    }
    $.ajax({
        url: "/content/deleteGoods?ids=" + ids,
        type: "post",
        dataType: "json",
        async: true,
        success: function (result) {
            if (result.code == 10000) {
                alert("删除成功")
            } else {
                alert("删除失败")
            }
        },
        error: function (result) {
            alert("系统错误,请稍后再试");
        }
    })

}
</script>


<body class="hold-transition skin-red sidebar-mini">
<!-- .box-body -->

<div class="box-header with-border">
    <h3 class="box-title">广告管理</h3>
</div>

<div class="box-body">

    <!-- 数据表格 -->
    <div class="table-box">

        <!--工具栏-->
        <div class="pull-left">
            <div class="form-group form-inline">
                <div class="btn-group">
                    <button type="button" class="btn btn-default" title="新建" data-toggle="modal"
                            data-target="#addModal"><i class="fa fa-file-o"></i> 新建
                    </button>
                    <button type="button" onclick="deleteGoods()" class="btn btn-default" title="删除"><i class="fa fa-trash-o"></i> 删除</button>
                    <button type="button" class="btn btn-default" title="开启" onclick='confirm("你确认要开启吗？")'><i
                            class="fa fa-check"></i> 开启
                    </button>
                    <button type="button" class="btn btn-default" title="屏蔽" onclick='confirm("你确认要屏蔽吗？")'><i
                            class="fa fa-ban"></i> 屏蔽
                    </button>
                    <button type="button" class="btn btn-default" title="刷新" onclick="window.location.reload();"><i
                            class="fa fa-refresh"></i> 刷新
                    </button>
                </div>
            </div>
        </div>
        <div class="box-tools pull-right">
            <div class="has-feedback">

            </div>
        </div>
        <!--工具栏/-->

        <!--数据列表-->
        <table id="dataList" class="table table-bordered table-striped table-hover dataTable">
            <thead>
            <tr>
                <th class="" style="padding-right:0px">
                    <input id="selall" type="checkbox" class="icheckbox_square-blue">
                </th>
                <th class="sorting_asc">广告ID</th>
                <th class="sorting">分类ID</th>
                <th class="sorting">标题</th>
                <th class="sorting">URL</th>
                <th class="sorting">图片</th>
                <th class="sorting">排序</th>
                <th class="sorting">是否有效</th>
                <th class="text-center">操作</th>
            </tr>
            </thead>
            <tbody id="tbody">

            </tbody>
        </table>
        <!--数据列表/-->
    </div>
    <!-- 数据表格 /-->
</div>
<!-- /.box-body -->


<!--增加窗口-->
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 id="myModalLabel">广告编辑</h3>
            </div>
            <div class="modal-body">

				<form id="addfrom">
                    <table class="table table-bordered table-striped"  width="800px">
                        <tr>
                            <td>广告分类</td>
                            <td>
                                <input type="text" name="categoryId">
                            </td>
                        </tr>
                        <tr>
                            <td>标题</td>
                            <td><input  class="form-control" name="title" placeholder="标题" >  </td>
                        </tr>
                        <tr>
                            <td>URL</td>
                            <td><input  class="form-control" name="url" placeholder="URL" >  </td>
                        </tr>
                        <tr>
                            <td>排序</td>
                            <td><input  class="form-control" name="sortOrder" placeholder="排序" >  </td>
                        </tr>
                        <tr>
                            <td>广告图片</td>
                            <td>
                                <table>
                                    <tr>
                                        <td>
                                            <input type="file" id="myFile" name="myFile"/>
                                            <input type="hidden" name="pic" id="rimage">
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                        <tr>
                            <td>是否有效</td>
                            <td>
                                <input type="radio" name="status" value="0" class="icheckbox_square-blue" >无效
                                <input type="radio" name="status" value="1" class="icheckbox_square-blue" >有效
                            </td>
                        </tr>
                    </table>
				</form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-success" onclick="insertCon()" data-dismiss="modal" aria-hidden="true">保存</button>
                <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
            </div>
        </div>
    </div>
</div>
<!-- 编辑窗口 -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 id="myModalLabel">广告编辑</h3>
            </div>
            <div class="modal-body">
                <form id="contentId">
                    <table class="table table-bordered table-striped" width="800px" id="updatetable">

                    </table>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-success" data-dismiss="modal" aria-hidden="true" onclick="update()">保存</button>
                <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
            </div>
        </div>
    </div>
</div>

</body>

</html>